<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>展示汉字笔画的小页面</title>
    <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@1.3/dist/hanzi-writer.min.js"></script>

    <script type="text/javascript">
        var writer = null;
        function show() {
            var x = document.getElementById("name");
          
            //首次渲染，创建汉字
            if(writer == null){
                writer = HanziWriter.create('grid-background-target', x.value, {
                    width: 200,
                    height: 200,
                    padding: 5,
                    showOutline: true
                });
            }else{//非首次，则修改为新的汉字
                writer.setCharacter(x.value);
            }
           
           //动画展示汉字笔画
            writer.animateCharacter();
        }
    </script>
</head>
<body>

<p>文本框内输入一个汉字，并点击“笔画按钮”</p>
<input type="text" id="name"/>
<button id="animate-button" onclick="show();">Animate</button>
<span id="msg" style="color:red;">仅支持一个汉字</span>
<br/>
<br/>
<!--汉字所在的田字格背景图-->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" id="grid-background-target">
    <line x1="0" y1="0" x2="200" y2="0" stroke="#DDD"/>
    <line x1="0" y1="0" x2="0" y2="200" stroke="#DDD"/>
    <line x1="0" y1="200" x2="200" y2="200" stroke="#DDD"/>
    <line x1="200" y1="0" x2="200" y2="200" stroke="#DDD"/>

    <line x1="0" y1="100" x2="200" y2="100" stroke="#DDD"/>
    <line x1="100" y1="0" x2="100" y2="200" stroke="#DDD"/>
    <line x1="0" y1="0" x2="200" y2="200" stroke="#DDD"/>
    <line x1="0" y1="200" x2="200" y2="0" stroke="#DDD"/>
</svg>

</body>
</html>
